<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      fixed
      placeholder 
      class="top-nav-bar"
      @click-left="$router.push({name: 'home'})"
      @click-right="$router.push({name: 'search'})"
    >
      <template #left>
        <div class="top-nav-bar-left-img-box">
          <img src="@/assets/meiuo-logo.png" alt="">
        </div>
      </template>
      <template #right>
        <van-icon name="search" size="25" color="#ee0a24"/>
      </template>
    </van-nav-bar>
    <!-- 商品展示列表 -->
    <div class="goods-list-box">
      <GoodsListItem v-for="goods in goodsList" :key="goods.id" :goods="goods"></GoodsListItem>
    </div>
  </div>
</template>

<script>
import GoodsListItem from '@/components/GoodsListItem.vue'

export default {
  name: 'Home',
  components: {
    GoodsListItem,
  },
  data() {
    return {
      goodsList: [], // 商品数据列表
    }
  },
  created() {
    this.req.get('goods/goodsList/').then(res=>{
      let data = res.data
      if (data.mark === 1) {
        this.goodsList = data.goodsList
      } else {
        this.$toast.fail(data.message)
      }
    }, err=>{
      this.$toast.fail(err)
    })
  }
}
</script>

<style lang="less" scoped>
// 主页容器样式
.home-container {
  min-height: 100vh;
  background-color: #eee;
  padding-bottom: 0.3rem;
}
</style>